<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入组件库 -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="common.css">

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="common.js"></script>
    <title>Title</title>
    <style>

        .block{
            float: right;
            margin: 0  5% 10px  0 ;
        }
        #add{
            margin: 0 0  0 5% ;
        }
        .footer{
            height: 100px;
        }
        .el-alert{

            position: fixed;
            z-index: 3000;
            margin-left: 20%;
            width: 650px;
        }
    </style>
</head>

<body>
<div id="app">

    <el-menu
            default-active="4"
            class="leftNavBar el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#E6E6E6">
        <div class="title" style="margin-bottom: 10px">
            Market Management
        </div>
        <a href="/market/detail.html">
            <el-menu-item  index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">库存管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail2.html">
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">商品管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail3.html">
            <el-menu-item  index="3">
                <i class="el-icon-menu"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>
        </a>
        <a href="/market/detail4.html">
            <el-menu-item  index="4">
                <i class="el-icon-menu"></i>
                <span slot="title">入库订单</span>
            </el-menu-item>
        </a>
    </el-menu>
    <div class="right">
        <div class="top"><span></span>{{title}}<span style="margin-right: 5%">
                <el-popover
                        placement="top-start"
                        width="50"
                        trigger="hover"
                >
                    <div style="height:100%;text-align: center"><el-button onclick="logout()">登出</el-button></div>
                           <i slot="reference" class="el-icon-more"></i>
                        </el-popover>
            </span>
        </div>
        <el-alert
                v-if="successAlert"
                :title="alertText"
                type="success"
                show-icon>
        </el-alert>
        <!--弹出框  采购-->
        <el-dialog type="text" title="添加订单" width="500px" :visible.sync="addFormVisible">
            <el-form :model="purchaseForm">
                <el-form-item label="商品名" :label-width="formLabelWidth">
                    <el-input v-model="purchaseForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="purchaseForm.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="过期日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="purchaseForm.expire"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="purchase">确 定</el-button>
            </div>
        </el-dialog>
        <!--弹出框——编辑-->
        <el-dialog type="text" title="编辑订单" width="500px" :visible.sync="editFormVisible">
            <el-form :model="editForm">
                <el-form-item label="商品名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="editForm.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 表单只要内容-->
        <template>
            <!--      按钮-->

            <!--   日期选择器-->
            <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                        v-model="timevalue"
                        type="daterange"
                        align="right"
                        unlink-panels
                        size="small"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="load"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>

            <!-- 各个列-->
            <el-table
                    :data="tableData"
                    ref="filterTable"
                    style="width: 90%;margin: auto">
                <el-table-column
                        prop="pid"
                        label="批次编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="iid"
                        label="商品编号"
                        width="150"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名"
                        width="200">
                </el-table-column>

                <el-table-column
                        prop="num"
                        label="进货数量"
                        width="150"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="剩余数量"
                        width="150"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="进货日期"

                        sortable
                >

                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="expire"-->
<!--                        label="过期日期"-->
<!--                        width="250"-->
<!--                        sortable-->
<!--                        :filters="[{ text: '已过期', value: '已过期' }, { text: '未过期', value: '未过期' }]"-->
<!--                        :filter-method="filterDate"-->
<!--                >-->
<!--                </el-table-column>-->
<!--                <el-table-column label="操作">-->
<!--                    <template slot-scope="scope">-->

<!--                        <el-button-->
<!--                                size="mini"-->
<!--                                type="danger"-->
<!--                                @click="delTicket(scope.$index, scope.row)">删除</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->

            </el-table>
        </template>
        <div class="footer"></div>

    </div>


</div>
</body>
<script>
    new Vue({

        el: '#app',

        data: function() {
            let that = this;
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '乐事薯片',


                }, {
                    date: '2016-05-04',
                    name: '熊博士软糖',

                },


                ],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);

                        }
                    }, {
                        text: '最近一个月',
                        //这里面的this值会改变，要用this的话要在上面赋值that
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],

                    onPick(time){

                    }
                },
                editFormVisible:false,
                addFormVisible: false,
                successAlert:false,
                alertText:"false",
                purchaseForm:{
                    expire:'',
                    num: '',
                    name:'',
                },
                editForm:{
                    num: '',
                    name:'',
                },
                curRow : '',
                formLabelWidth: "100px",
                timevalue: [new Date(new Date() - 3600 * 1000 * 24 * 30),new Date(+new Date() + 1000 * 60 * 60 * 24)],
                title: '出入库记录'
            }
        },
        created(){
            this.load()

        },
        computed:{


        },
        methods:{
            load() {
                let self = this;
                $.get(baseUrl+'manager/scanPurchase',{'stime':this.timevalue[0].toLocaleString(),'etime':this.timevalue[1].toLocaleString(),"limit":99},function (response,status) {
                    if(response.result === true) {
                        self.tableData = response.data.detail;
                        console.log(response)
                    }
                })
            },
            purchase(){
                //在$post里面回调函数时,this将不再指代页面变量vue
                let self = this;
                console.log(this.purchaseForm);
                $.post(baseUrl+'manager/purchase',this.purchaseForm,function (response,status) {
                    if(response.result === true) {
                        self.successAlert = true;
                        self.alertText = response.msg
                        console.log(response);
                        self.load()
                    }
                })
            },
            filterDate(value, row) {
                console.log(row);
            },
            handleEdit(index, row) {
                this.curRow = row;
                this.editFormVisible=true
            },
            edit(){
                console.log(this.curRow)
            },

            delTicket(index, row) {
                this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(index, row);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },




    })



</script>

</html>
